<template>
	<view>
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="item in place.imgs">
					<image mode="scaleToFill" :src="item" class="nav-img"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="content">
			<view class="info">
				<view class="item-1">
					<text style="font-size: 40rpx;color: #5f5f5f;font-weight: 550;">{{place.name}}</text>
					<text>
						<image style="width: 20px;height: 20px;" src="/static/icon/fenxiang_1.png"></image>
					</text>
				</view>
				<view style="display: flex;flex-direction: row;align-items: center;">

					<text style="color: #bbb;">营业时间</text>
					<view style="height: 20rpx;border-left: 2rpx solid #bbb;margin-left: 10rpx;margin-right: 10rpx;">
					</view>
					<text style="color: #bbb;">{{place.openTime}}</text>

				</view>
			</view>
			<view class="address">
				<view style="display: flex;flex-direction: row;align-items: center;" @click="getLocation">
					<uni-icons type="location-filled" size="20" style="margin-right: 5rpx;"></uni-icons>
					<text style="color: #66666;">{{place.address}}</text>
				</view>
				<view>

					<uni-icons @click="makePhoneCall" type="phone" style="margin-right: 20rpx;" size="18"></uni-icons>
				</view>
			</view>
			<br>
			<view class="pre-place">
				<text style="margin-left: 20rpx;font-size: 38rpx;font-weight: bold;">场地预订</text>
				<view class="date" style="">
					<view class="item" v-for="item in dateList">
						<text>{{item.week}}</text>
						<text>{{item.day}}</text>
						<text class="item-3" @click="toPre(item)">预订</text>
					</view>
				</view>
			</view>
			<br>
			<view>
				<text style="margin-left: 10px;font-size: 16px;color: black;font-weight: 550;">场地设施</text>
				<view style="margin-left: 20px;">
					<view style="display: flex;flex-direction: row;margin-top: 10px;">
						<text style="color: black;">地板</text>
						<text style="margin-left: 10px;color: #black;">木质地板</text>
					</view>
					<view style="display: flex;flex-direction: row;margin-top: 10px;">
						<text style="color: #black;">灯光</text>
						<text style="margin-left: 10px;color: #black;">吊灯</text>
					</view>
					<view style="display: flex;flex-direction: row;margin-top: 10px;">
						<text style="color: #black;">休息区</text>
						<text style="margin-left: 10px;color: #black;">风扇、空调、暖气、VIP室</text>
					</view>
				</view>
			</view>
			<br>
			<view class="line">
				<view class="line-item"></view>
			</view>
			<br>
			<view>
				<text style="margin-left: 10px;font-size: 16px;color: black;font-weight: 550;">场馆服务</text>
				<view style="margin-left: 20px;">
					<view style="display: flex;flex-direction: row;margin-top: 10px;">
						<text style="color: black;">器材租借</text>
						<text style="margin-left: 10px;color: #black;">储物柜、球拍</text>
					</view>
					<view style="display: flex;flex-direction: row;margin-top: 10px;">
						<text style="color: #black;">洗浴设施</text>
						<text style="margin-left: 10px;color: #black;">更衣室、提供洗浴、热水供应</text>
					</view>
					<view style="display: flex;flex-direction: row;margin-top: 10px;">
						<text style="color: #black;">器材维护</text>
						<text style="margin-left: 10px;color: #black;">拉线</text>
					</view>
					<view style="display: flex;flex-direction: row;margin-top: 10px;">
						<text style="color: #black;">场馆卖品</text>
						<text style="margin-left: 10px;color: #black;">饮料、羽毛球、球拍、球鞋、球衣、拍线</text>
					</view>
					<view style="display: flex;flex-direction: row;margin-top: 10px;">
						<text style="color: #black;">更多服务</text>
						<text style="margin-left: 10px;color: #black;">WIFI、会员卡、专业培训、穿线服务</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				place: {
					name: "Handsome羽球中心",
					address: "上海市浦东新区创客大厦1楼101",
					latitude: 31.696649,
					longitude: 119.881087,
					phone: "17521362505",
					openTime: "10:00-22:00",
					imgs: ["/static/p3.jpg", "/static/p4.jpg", "/static/p5.jpg"]
				},
				dateList: [{
					"week": "今天",
					"day": "8月14日"
				}, {
					"week": "明天",
					"day": "8月15日"
				}, {
					"week": "后天",
					"day": "8月16日"
				}, {
					"week": "周四",
					"day": "8月17日"
				}, {
					"week": "周五",
					"day": "8月18日"
				}, {
					"week": "周六",
					"day": "8月19日"
				}, {
					"week": "周日",
					"day": "8月20日"
				}],


			}
		},
		onLoad() {

		},
		methods: {
			// uni.openLocation
			getLocation() {
				uni.openLocation({
					"latitude": this.place.latitude, //纬度
					"longitude": this.place.longitude //经度
				})
			},
			makePhoneCall() {
				uni.makePhoneCall({
					phoneNumber: this.place.phone //仅为示例
				});
			},
			toPre(item) {
				uni.navigateTo({
					url: '/pages/pre/index'
				});
			}

		}
	}
</script>

<style lang="scss">
	::-webkit-scrollbar {
		display: none;
		/* Chrome Safari */
	}

	.line {
		width: 100%;
		display: flex;
		height: 30rpx;
		flex-direction: row;
		justify-content: center;

		.line-item {
			border-bottom: 1px solid #f2f2f3;
			width: 97%;
		}
	}

	.uni-margin-wrap {
		width: 100%;
	}

	.swiper {
		// width: 100%;

		height: 450rpx;
	}

	.swiper-item {
		display: block;
		// height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}

	.uni-bg-red {
		background-color: red;
	}

	.uni-bg-green {
		background-color: green;
	}

	.uni-bg-blue {
		background-color: blue;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.nav-img {
		width: 100%;
	}

	.content {
		display: flex;
		flex-direction: column;
		// background-color: white;
		margin-top: -5px;
		width: 100%;
		position: absolute;
		border-radius: 20rpx 20rpx 0rpx 0rpx;

		.info {
			display: flex;
			flex-direction: column;
			padding: 20rpx;

			.item-1 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
		}

		.address {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			background-color: fefefe;
			box-shadow: 10rpx 10rpx 10rpx #f0f1f3;
			align-items: center;
			height: 80rpx;
			border-radius: 20rpx;
			margin-top: 10px;
			margin-left: 20rpx;
			width: 95%;
		}

		.pre-place {
			width: 100%;

			.date {
				display: flex;
				flex-direction: row;
				height: 250rpx;
				align-items: center;
				margin-top: 40rpx;
				background-color: #f5f9f9;
				width: 100%;
				overflow-x: scroll;

				.item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 160rpx;
					min-width: 160rpx;
					height: 200rpx;
					background-color: white;
					border-radius: 10rpx;
					margin-left: 10rpx;

					.item-3 {
						text-align: center;
						width: 120rpx;
						border-radius: 40rpx;
						border: 1px solid #8d8df9;
						font-size: 30rpx;
					}
				}
			}
		}
	}
</style>